<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my{
            color:red;
            background: green;
        }
    </style>
</head>
<body>
    <div>
        <p class="my" id="one">有一个女生来上班，上班前忘记化妆了，结果被按旷工处理了！</p>
        <p class="my" id="two">金庸的武侠世界</p>
        <input type="text">
        <input type="button">
    </div>
</body>
<script>
    // 1- 可以通过id获取元素
    // console.log(document.querySelector("#one"))

    // 2- 可以通过class获取元素,如果有多个元素满足条件，只会获取第一个
    // console.log(document.querySelector(".my"))

    // 3- 可以通过标签的名字获取
    // console.log(document.querySelector("p"));

    // 4- 可以通过属性获取
    console.log(document.querySelector("input[type=text]"))
</script>
</html>